<template>
  <div class="add">
    <BaseDialog
      :title="isType === 'add' ? '新增' : '编辑'"
      width="1200px"
      v-model:visible="innerVisible"
      :renderDefaultFooter="false"
    >
      <MyForm
        v-model:formData="formData"
        v-model:columns="formColumns"
        :rules="rules"
        :labelWidth="90"
        :saveBtnLoading="saveBtnLoading"
        background="#fff"
        @submit="onSubmit"
        @cancel="innerVisible = false"
      >
      </MyForm>
    </BaseDialog>
  </div>
</template>
<script setup lang="tsx">
import { ref, computed, onMounted, watch } from "vue";
import * as api from "@/api/index.js";
import i18n from "@/lang/index.js";
import { ElMessage } from "element-plus";
import { columnFilters } from "@/utils/mUtils.js";
const props = defineProps({
  visible: {
    type: Boolean,
  },
  currRow: {
    type: Object,
    default: () => null,
  },
  isType: {
    type: String,
    default: "add",
  },
});
const emits = defineEmits(["update:visible", "onSubmit"]);
const innerVisible = computed({
  get() {
    return props.visible;
  },
  set(val) {
    emits("update:visible", val);
  },
});
const formData = ref({
  importTemplateDetailsList: [],
});
const formColumns = ref([
  {
    title: "",
    structure: [
      {
        formLayout: "el-row",
        content: [
          {
            label: "模块名称",
            type: "label_select",
            prop: "moduleId",
            options: [],
            props: {
              label: "moduleName",
              value: "id",
            },
            handleSelectChange: (val) => {
              importFieldsGetinfo(val);
            },
            span: 8,
          },
          {
            label: "模板编码",
            prop: "templateCode",
            type: "label_input",
            span: 8,
          },
          {
            label: "模板名称",
            prop: "templateName",
            type: "label_input",
            placeholder: "请输入模块名称",
            span: 8,
          },
          {
            label: "主数据表格",
            prop: "mainTableIndex",
            type: "label_number",
            placeholder: "请输入主数据表格",
            span: 8,
          },
          {
            label: "多表关联",
            prop: "multiSheetRules",
            type: "label_input",
            placeholder: "请输入多表关联",
            span: 8,
          },
          {
            label: "表头位",
            prop: "headerLineNum",
            type: "label_number",
            placeholder: "请输入表头位",
            span: 8,
          },
          {
            label: "有效数据位",
            prop: "leastData",
            type: "label_number",
            placeholder: "请输入有效数据位",
            span: 8,
          },
        ],
      },
    ],
  },
  {
    title: "",
    structure: [
      {
        type: "tabel",
        tableId: "importTemplateDetailsList",
        tableIndex: 0,
        prop: "importTemplateDetailsList",
        keepSourceKey: "fieldName",
        height: 400,
        columns: [
          {
            type: "checkbox",
            width: 50,
            fixed: "left",
            align: "center",
          },
          {
            title: "字段名称",
            field: "fieldName",
            editRender: {},
            slots: { edit: "input_edit" },
          },
          {
            title: "字段编码",
            field: "fieldNameEn",
            editRender: {},
            slots: { edit: "input_edit" },
          },
          {
            title: "字段规则",
            field: "rules",
            editRender: {},
            slots: { edit: "input_edit" },
          },
        ],
        editRules: {
          fieldName: [
            {
              required: true,
              message: i18n.global.t("请输入字段名称"),
              trigger: ["blur"],
            },
          ],
          fieldNameEn: [
            {
              required: true,
              message: i18n.global.t("请输入字段编码"),
              trigger: ["blur"],
            },
          ],
        },
        multipleSelection: [],
        buttonType: [],
        batchDelete: true,
      },
    ],
    hide: false,
  },
]);
const rules = ref({
  moduleId: [
    {
      required: true,
      message: i18n.global.t("请选择模块名称"),
      trigger: "change",
    },
  ],
  templateCode: [
    {
      required: true,
      message: i18n.global.t("请输入模板编码"),
      trigger: "change",
    },
  ],
  templateName: [
    {
      required: true,
      message: i18n.global.t("请输入模板名称"),
      trigger: "change",
    },
  ],
  mainTableIndex: [
    {
      required: true,
      message: i18n.global.t("请输入主数据表格"),
      trigger: "change",
    },
  ],
  leastData: [
    {
      required: true,
      message: i18n.global.t("请输入有效数据位"),
      trigger: "change",
    },
  ],
});
const saveBtnLoading = ref(false);
onMounted(() => {
  getModuleList();
  if (props.isType === "edit") {
    getInfo();
    return;
  }
});
const getModuleList = async () => {
  const params = {
    pageNum: 1,
    pageSize: 300,
  };
  const { rows } = await api.default.common.importFields.list(params);
  columnFilters(formColumns.value, "moduleId").options = rows.map((item) => {
    return {
      id: item.id,
      moduleName: `${item.moduleName}`,
    };
  });
};
const importFieldsGetinfo = async (id) => {
  const { data } = await api.default.common.importFields.getInfo(id);
  formData.value.importTemplateDetailsList = data.importFieldsList.map(
    (item) => {
      return {
        fieldName: item.fieldName,
        fieldNameEn: item.fieldNameEn,
      };
    }
  );
};
const getInfo = async () => {
  saveBtnLoading.value = true;
  try {
    const { data } = await api.default.common.importTemplate.getInfo(
      props.currRow.id
    );
    formData.value = {
      ...data,
      importTemplateDetailsList: data.importTemplateDetailsList || [],
    };
    saveBtnLoading.value = false;
  } catch (err) {
    saveBtnLoading.value = false;
  }
};

const onSubmit = () => {
  const parmas = {
    ...formData.value,
  };
  if (props.isType === "add") {
    // 新增
    saveBtnLoading.value = true;
    api.default.common.importTemplate
      .add({
        ...parmas,
      })
      .then(() => {
        ElMessage.success("新增成功");
        innerVisible.value = false;
        saveBtnLoading.value = false;
        emits("onSubmit");
      })
      .catch(() => {
        saveBtnLoading.value = false;
      });
  } else {
    // 编辑
    saveBtnLoading.value = true;
    api.default.common.importTemplate
      .edit(parmas)
      .then(() => {
        ElMessage.success("修改成功");
        innerVisible.value = false;
        saveBtnLoading.value = false;
        emits("onSubmit");
      })
      .catch(() => {
        saveBtnLoading.value = false;
      });
  }
};
</script>
<style lang="scss" scoped>
.search-btn {
  width: 120px;
  margin: 20px auto 0;
}
</style>
